import React, { Component } from 'react';
import { Image, ScrollView, StatusBar, Text, View } from 'react-native';
import { List, Toast } from 'antd-mobile';
import styles from './style';
const Item = List.Item;

export default class HomeScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      title: params.name,
      statusBarStyle: 'light-content',
      headerBackTitle: ' ',
      headerTintColor: '#fff',
      headerTitleStyle: {
        color: 'white',
      },
      headerBackTitleStyle: {
        color: 'white',
      },
      headerStyle: {
        backgroundColor: '#ed4040'
      },
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    this.renderPureText = this.renderPureText.bind(this);
    this.renderOnePicText = this.renderOnePicText.bind(this);
    this.renderThreePicText = this.renderThreePicText.bind(this);
  }

  async componentDidMount() {
    const { num } = this.props.navigation.state.params;
    await this.getData(num).catch(e => {
      console.log(e);
    });
  }

  async getData(num) {
    Toast.loading('加载中...', 999999999999);
    let f = await fetch(`https://ecmad.com/toutiao/api/article/source?num=${num}&pageSize=200`, {
      method: 'GET',
    }).catch(() => {
      Toast.offline('网络异常', 2, f => f, false);
    });
    let res = await f.json();
    if (res.code === 200) {
      Toast.hide();
      this.setState({
        data: res.data,
      });
    } else {
      Toast.offline('网络异常', 2, f => f, false);
    }

  }

  renderPureText(item = {}) {
    const { navigate } = this.props.navigation;
    return (
      <Item
        multipleLine
        align="top"
        wrap
        onClick={() => navigate('Detail', {
          title: item.title,
          id: item.id,
        })} key={item.id}
        style={styles.listItem}
      >
        <Text style={styles.listTitle}>{item.title}</Text>
        <View style={styles.listInfo}>
          <Text style={styles.ListText}>{item.public_name}</Text>
          <Text style={styles.ListText}>{item.datetime}</Text>
        </View>
      </Item>
    );
  }

  renderOnePicText(item = {}) {
    const { navigate } = this.props.navigation;
    return (
      <Item
        extra={<Image source={{ uri: item.images[0] }} style={styles.cover} />}
        multipleLine
        align="top"
        wrap
        onClick={() => navigate('Detail', {
          title: item.title,
          id: item.id,
        })} key={item.id}
        style={styles.listItem}
      >
        <Text style={styles.listTitle}>{item.title}</Text>
        <View style={styles.listInfo}>
          <Text style={styles.ListText}>{item.public_name}</Text>
          <Text style={styles.ListText}>{item.datetime}</Text>
        </View>
      </Item>
    );
  }

  renderThreePicText(item = {}) {
    const { navigate } = this.props.navigation;
    return (
      <Item
        multipleLine
        align="top"
        wrap
        onClick={() => navigate('Detail', {
          title: item.title,
          id: item.id,
        })} key={item.id}
        style={styles.listItem}
      >
        <Text style={styles.listTitle}>{item.title}</Text>
        <View style={styles.listImages}>
          <Image source={{ uri: item.images[0] }} style={styles.listImageCell} />
          <View style={{ width: 5 }}></View>
          <Image source={{ uri: item.images[1] }} style={styles.listImageCell} />
          <View style={{ width: 5 }}></View>
          <Image source={{ uri: item.images[2] }} style={styles.listImageCell} />
        </View>
        <View style={styles.listInfo}>
          <Text style={styles.ListText}>{item.public_name}</Text>
          <Text style={styles.ListText}>{item.datetime}</Text>
        </View>
      </Item>
    );
  }

  render() {
    const { num, name,logo,info } = this.props.navigation.state.params;
    const { data } = this.state;
    return (
      <ScrollView>
        <StatusBar barStyle="light-content" />
        <View style={styles.numContainer}>
          <View style={{ width: 80, marginRight: 15 }}>
            <Image source={{ uri: logo }} resizeMode={'contain'} style={{ width: 80, height: 80, }} />
          </View>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 18, color: '#666', marginBottom: 10 }}>{name}</Text>
            <Text style={{ fontSize: 14, color: '#999', marginBottom: 10}}>{num}</Text>
            <Text style={{ fontSize: 14, color: '#666' }}>{info}</Text>
          </View>
        </View>
        <List style={styles.list}>
          {
            Array.isArray(data) && data.map(item => {
              if (item.images.length === 0) {
                return this.renderPureText(item)
              } else if (item.images.length > 0 && item.images.length < 3) {
                return this.renderOnePicText(item)
              } else if (item.images.length >= 3) {
                return this.renderThreePicText(item)
              }
            })
          }
        </List>
      </ScrollView>
    );
  }
}
